<template>
  <div class="account">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分类管理</span>
      </div>
      <div>
        <div style="font-size: 20px; font-weight: 700;margin-bottom:10px;">乐居分类</div>
        <el-row>
          <el-col v-for="item in lejuList" :key="item.id" :span="6">
            <el-card class="kapian">
              <div slot="header" class="clearfix">
                <span>{{ item.name }}</span>
              </div>
              <div>
                <img
                  :src="item.icon"

                  alt=""
                >
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 30px; font-weight: 700;">全部分类</span>

      </div>
      <div>
        <el-table
          :data="classList"
          style="width: 100%"
          row-key="id"
          border
          :tree-props="{children: 'children'}"
        >
          <el-table-column
            prop="name"
            label="菜单名称"
            width="180"
          />
          <el-table-column
            prop="icon"
            label="icon"
            width="180"
          >
            <template v-slot="sisui">
              <div style="width:100px;height:100px;">
                <img :src="sisui.row.icon" style="width:100%;height:100%;" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            prop="name"
            label="分类名字"
            width="180"
          />
          <el-table-column
            prop="sort "
            label="排序"
            width="180"
          />
          <el-table-column
            prop="showStatus "
            label="显示状态"
            width="180"
          >
            <template v-slot="sisui">
              {{ sisui.row.showStatus?'显示':'不显示' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="navStatus "
            label="导航栏展示"
            width="180"
          >
            <template v-slot="sisui">
              {{ sisui.row.navStatus?'展示':'不展示' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="180"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAllCategory } from '@/api/product/classify/index.js'
export default {
  data() {
    return {
      // 全部商品分类
      classList: [],
      // 乐居商品分类
      lejuList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getAllCategory().then((res) => {
        console.log(res)
        var leju = res.data.items.find(ele => {
          if (ele.category.name === '乐居') {
            return ele
          }
        })
        console.log(leju.children)
        this.lejuList = leju.children
        var newAll = res.data.items.map(ele => {
          var obj = {
            children: ele.children,
            ...ele.category,
            category: ele.category
          }
          return obj
        })
        this.classList = newAll
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.account {
  margin: 30px;
  .kapian {
    width: 95%;
    height: 400px;

    border-color: aqua;

    img{
      max-width: 100%;
        max-height: 100%;
        vertical-align: middle;

    }
  }
}
</style>
